
/**
 * 一、redux的安装和配置
 * 1、安装redux
 * yarn add redux
 * 2、目录结构的设计
 * src
 *  |- store
 *    |-index.js:状态机的入口
 * 3、创建redux的store仓库对象
 * 二、redux的工作流程
 * 1、React组件通过redux中的dispatch方法向redux中发送一个通知对象，通过对象中的type是通知的类型
 * 2、reudx中的reduce函数共有两个参数，第1个参数是上一次保存在仓库中的状态值，第2个参数是action通知对象
 *    reduce接收到React组件发送到redux仓库中的通知对象，并且和它的第2个参数中的type进行比较，比较之后就决定
 *    做什么样的计算工作，完成计算工作之后，再将改变后的状态通过return的方式保存到store仓库中
 * 3、页面组件通过store对象中的subscribe方法来接收改变后的store对象
 * 4、接收到数据不能直接在页面中渲染，需要调用相关的方法让页面更新
 * 
 * 缺点1：store.subscribe中的代码为了让页面更新，代码毫无实际业务逻辑意义
 * 缺点2：state初始值直接赋一个基本类型的变量，对于state来说一个污染
 * 缺点3：action中的type值容易被更改
 * 缺点4：reducer没有拆分和合并
 * 缺点5：redux中不能完成异步操作
 * .....
 * 三、action和reducer的优化
 * 1、使用action creator创建action对象
 * 什么是action creator:所谓action creator是指创建action的函数，一个普通的对象中必须要包含type属性，除了type属性之外，其他属性可以自定义
 * 好处:可以在页面组件中dispatch通知对象的时候，可以向reduce函数传递额外的参数
 * 2、action的type的值常量化
 * 好处：降低了程序出错率；在编写项目更加规范
 * 3、reduce优化
 * 之前直接赋基本数据类型就污染了state状态
 * reduce函数的第一个参数对state赋值的时候，赋对象类型的值
 * 四、react-redux使用
 * 1、安装react-redux
 * yarn add redux
 * yarn add react-redux
 * 2、全局注入store对象
 * 在项目入口文件中index.js
 * import {Provider} from 'react-redux'
   import store from './store'
   root.render(
        <Provider store={store}>
            <App />
        </Provider>
   );
   3、使用高阶组件的方式将store仓库和页面组件连接起来
   使用步骤
   1、在index.js中使用Provider将App组件包裹起来，并将store注入到全局
   2、使用react-redux中提供的connect高阶函数将普通的页面组件变成高阶组件
   说明：在类组件编程的年代(hooks出现之前)基本使用的是它，使用其他比较麻烦
   利用的是高阶组件的方式来进行编程的
   五、使用hook操作仓库
   1、在index.js中使用Provider将App组件包裹起来，并将store注入到全局

 */
import React from 'react'
import ShopCart from './views/ShopCart'


export default function App() {
  return (
    <div style={{display:'flex'}}>
      <ShopCart></ShopCart>
    </div>
  )
}
